<template>
	<view class="wrap">
		<fa-navbar :title="activity.title" :backText="$t('common.return')" :border-bottom="false"></fa-navbar>
		<view class="inviteText">
			{{$t('step.prize.tips',{days:order.prize_days})}}
		</view>
		<scroll-view scroll-y style="height: 100%;width: 100%;" refresher-default-style="black"
			:refresher-enabled="refresherEnabled" :refresher-triggered="triggered" :refresher-threshold="45"
			refresher-background="lightgreen" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort">
			<!-- 顶部导航 -->

			<view class="cardContent">
				<!-- {{ card.content }} -->
				<view class="contentLeft">
					<view class="LeftTop">
						<image :src="activity.images" mode=""></image>
					</view>
				</view>
				<view class="contentRight">

					<view class="RightBotton">
						<view class="botton1">
							{{activity.content}}
						</view>
						<view class="botton2">
							<view class="Dli">
								{{activity.qualified_number}} de {{activity.total_number}}
								<br>
								{{$t('activity.players')}}
							</view>
							<view class="Dli">
								{{$t('common.currency')}}{{activity.prize_pool}}
								<br>
								{{$t('activity.pot')}}
							</view>

						</view>
					</view>
					<view class="RightTop">

						<view class="top2">
							{{activity.start_date}} - {{activity.end_date}} · {{order.weeks}} {{$t('activity.weeks')}}
						</view>

					</view>
				</view>

			</view>
			<view class="split"></view>
			<!-- 计步器 -->

			<view class="container" :style="{background: 'linear-gradient(#03dd28, #c0ffe0)'}">
				<!-- 用于显示圆环进度条的canvas -->
				<canvas canvas-id="stepCircle" class="circle-canvas">
					<view class="step-center">
						<text class="current-steps" @click="count">{{ currentSteps }}</text>
						<text class="step-text">{{$t('common.step')}}</text>
					</view>
				</canvas>
				<!-- 步数信息放置在圆圈中心 -->
				<!-- Active day 和 Power day 信息 -->
				<view class="step-info2">
					<text><span style="color: #B5CB46; margin-right: 8px;">{{$t('step.active day')}}</span><br />
						{{ activeDay }} {{$t('common.step')}}</text>
				</view>
				<view class="step-info">
					<text><span style="color: #52CC80; margin-right: 8px;">{{$t('step.power day')}}</span><br />
						{{ powerDay }} {{$t('common.step')}}</text>
				</view>
				<view class="shareText" @click="navigateToPage">
					{{$t('common.share')}}
				</view>
			</view>

			<view class="split"></view>
			<view class="weekTime">
				<view class="weekTitle">
					<view>{{$t('step.week')}} {{activity.weeks_num}} {{$t('common.of')}}
						{{activity.weeks}}
					</view>
					<view @click="goPage('/pages/step/past_weeks?id='+id)">{{$t('step.pastweeks')}} →
					</view>
				</view>

				<view class="weekFlex">
					<view class="week">
						<view class="top">
							{{$t('common.week.sunday')}}
						</view>
						<view :class="getClass(step['0'],0)">
						</view>
						<view class="bottom">
							{{step['0']}}
						</view>
					</view>
					<view class="week">
						<view class="top">
							{{$t('common.week.monday')}}
						</view>
						<view :class="getClass(step['1'],1)">
						</view>
						<view class="bottom">
							{{step['1']}}
						</view>

					</view>
					<view class="week">
						<view class="top">
							{{$t('common.week.tuesday')}}
						</view>
						<view :class="getClass(step['2'],2)">

						</view>
						<view class="bottom">
							{{step['2']}}
						</view>
					</view>
					<view class="week">
						<view class="top">
							{{$t('common.week.wednesday')}}
						</view>
						<view :class="getClass(step['3'],3)">

						</view>
						<view class="bottom">
							{{step['3']}}
						</view>
					</view>
					<view class="week">
						<view class="top">
							{{$t('common.week.thursday')}}
						</view>
						<view :class="getClass(step['4'],4)">

						</view>
						<view class="bottom">
							{{step['4']}}
						</view>
					</view>
					<view class="week">
						<view class="top">
							{{$t('common.week.friday')}}
						</view>
						<view :class="getClass(step['5'],5)">

						</view>
						<view class="bottom">
							{{step['5']}}
						</view>
					</view>
					<view class="week">
						<view class="top">
							{{$t('common.week.saturday')}}
						</view>
						<view :class="getClass(step['6'],6)">

						</view>
						<view class="bottom">
							{{step['6']}}
						</view>
					</view>
				</view>
			</view>
			<view class="week-tips"></view>
			<view class="updateNow">

			</view>
		</scroll-view>

	</view>

</template>
<script>
	export default {
		data() {
			return {
				refresherEnabled: true,
				triggered: false,
				isOpenRefresh: true, // 是否开启下拉
				currentSteps: 0, // 当前步数
				activeDay: 7400, // 活跃日步数标准
				powerDay: 9000, // 强力日步数标准
				order: {},
				activity: {},
				id: 0,
				week: 0,
				step: {},


			};
		},
		// 下拉刷新

		onLoad(option) {
			console.log('onLoad')
			this.id = option.id
			var date = new Date()
			this.week = date.getDay()

			this.getactivityOrder()



		},
		methods: {
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				//console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				//this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				this.triggered = true;

				this.getactivityOrder()
				console.log("onRefresh--------");


			},
			// 自定义下拉刷新被复位
			onRestore() {
				//this.triggered = false; //'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			count() {
				this.drawCircle(this.currentSteps);
			},
			navigateToPage() {
				uni.navigateTo({
					url: '/pages/Search/share' // 这里填写要跳转的页面路径
				});
			},
			drawCircle(currentSteps) {
				const context = uni.createCanvasContext('stepCircle', this);
				let goalSteps = this.powerDay
				const percent = currentSteps / goalSteps; // 计算百分比
				const angle = percent * 2 * Math.PI; // 百分比对应的角度

				const centerX = 75; // 缩小后的圆心X轴位置
				const centerY = 75; // 缩小后的圆心Y轴位置
				const radius = 60; // 缩小后的圆半径

				// 绘制背景圆环
				context.setStrokeStyle('#e6e6e6'); // 背景颜色
				context.setLineWidth(10); // 缩小线条宽度
				context.beginPath();
				context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // 圆心坐标和半径
				context.stroke();

				// progress 是进度
				let progress = this.currentSteps;

				// 设置阈值，当进度达到阈值时变为绿色
				const threshold = this.activeDay;
				console.log(percent, currentSteps)
				// 判断是否达到阈值，动态设置颜色
				let dynamicColor = '#B5BDC0'; // 达到阈值为绿色，否则为灰色
				if (this.currentSteps >= this.activeDay && this.currentSteps < this.powerDay) {
					dynamicColor = '#c2e605'
				} else if (this.currentSteps >= this.activeDay) {
					dynamicColor = '#29BC64'
				} else {
					dynamicColor = '#B5BDC0'
				}
				// 绘制进度圆环,设置动态颜色
				context.setStrokeStyle(dynamicColor); // 动态进度颜色
				context.setLineCap('round'); // 使进度条头尾圆滑
				context.setLineWidth(10); // 缩小线条宽度
				context.beginPath();
				context.arc(centerX, centerY, radius, Math.PI / 2, angle + Math.PI / 2, false); // 从底部开始绘制
				context.stroke();

				// 将绘制的内容提交到canvas
				context.draw();
			},
			getClass(steps, week) {
				let step_class = 'unknow'
				if (steps >= 9000) {
					step_class = "power"
				} else if (steps >= 7400 && steps < 9000) {
					step_class = "active"
				} else if (steps > 0 && steps < 7400) {
					step_class = "lost"
				} else {
					step_class = 'unknow'
				}
				if (week == this.week) {
					step_class += ' stepping';
					this.currentSteps = steps
					this.count()
				}
				return step_class;
			},
			getactivityOrder() {

				this.$api.activityOrder({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.order = res.data;
						this.activity = res.data.activity
						this.step = res.data.step;
						this.activity.prize_pool = this.activity.prize_pool.toLocaleString("pt-BR")
					}
					this.triggered = false;
				});
			}



		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.inviteText {
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 13px;
		background-color: #29BC64;
		color: #fff;
	}

	.cardContent {
		padding: 10px;
		display: flex;
		// height: 200px;

		box-sizing: border-box;

		.contentLeft {
			width: 30%;

			.LeftTop {

				image {
					width: 100%;
					height: 80px;
					border-radius: 8px;
				}
			}


		}

		.contentRight {
			width: 70%;
			padding: 0 10px;

			.RightTop {
				width: 100%;


				.top2 {
					color: #000000;
					font-size: 12px;

				}

			}

			.RightBotton {
				width: 100%;

				.botton1 {
					font-size: 13px;
				}

				.botton2 {
					font-size: 12px;
					display: flex;
					color: #29BC64;
					/* font-weight: bold; */
					margin: 10px auto;

					.Dli {
						margin-right: 20px;
					}
				}
			}

		}

	}


	//计步器
	.container {
		padding-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 220px;

		position: relative;

	}

	.circle-canvas {
		width: 150px;
		height: 150px;
		position: relative;
		/* 确保绝对定位的容器 */
	}

	.step-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 精确地将步数放在圆心 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.current-steps {
		font-size: 24px;
		/* 当前步数字体大小 */
		font-weight: bold;
		color: #B7BAC3;
	}

	.step-text {
		font-size: 16px;
		/* "steps" 文本的字体大小 */
		color: #888;
	}

	.step-info {
		position: absolute;
		left: 50%;
		top: 149px;
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
	}

	.step-info text {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: #888;
	}

	.step-info2 {
		position: absolute;
		right: 14%;
		top: 80px;
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
	}

	.step-info2 text {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: #888;
	}

	.updateNow {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 30px;
		line-height: 35px;
		text-align: center;
		font-size: 12px;
		background-color: #f3fff8;
		color: #fff;
	}

	.week-tips {
		text-align: center;
	}

	.shareText {
		position: absolute;
		right: 20px;
		top: 0;
		margin-top: 10px;
		color: #29BC64;
		font-weight: bold;

	}

	.split {
		border-top: #eeeeee solid 1px;
		border-bottom: #eeeeee solid 1px;
		height: 10px;
		background-color: #ebfbee;
	}

	.weekTime {
		height: 180px;
		background-color: #fff;

		.weekTitle {
			font-weight: bold;
			font-size: 13px;
			padding: 10px 10px 10px 10px;
			color: #6c7379;
			display: flex;
			justify-content: space-between;
		}

		.weekFlex {
			height: 150px;
			display: flex;
			color: #ebfbee;

			// background-color: #ebfbee;
			.week {
				text-align: center;
				width: 60px;

				// background-color: #888;
				.top {
					text-align: center;
					padding-top: 10px;
					font-size: 14px;
					color: #868e96;
				}


				.unknow {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;

					border-radius: 35px;
					border: 1px dashed #B7BAC3;
				}


				.stepping {
					border: 1px dashed #fff !important;
				}

				.lost {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #ccc;
					border-radius: 35px;
					border: 1px solid #B7BAC3;
				}

				.power {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #29BC64;
					background-image: url("../../static/image/power.png");
					background-size: 80% 80%;
					background-position: 50% 50%;
					background-repeat: no-repeat;
					border-radius: 35px;
					border: 1px solid #29BC64;
				}

				.active {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #C1E804;
					background-image: url("../../static/image/right.png");
					background-size: 65% 65%;
					background-position: 50% 50%;
					background-repeat: no-repeat;
					border-radius: 35px;
					border: 1px solid #C1E804;
				}


				.bottom {
					text-align: center;

					font-size: 14px;
					color: #868e96;
				}
			}



		}
	}



	.subCon {

		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dff6dd;
		// padding: 0 10px;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.centre {
		text-align: center;
		padding: 104px 0;
		font-size: 16px;
	}

	.centre .btn {
		margin: 41px auto;
		width: 104px;
		border-radius: 16px;
		line-height: 33px;
		color: #ffffff;
		font-size: 13px;
	}
</style>